<head>
	<title>SooperADS Word generator</title>
	<link id="ICON" rel="icon" href="./images/icon.png" />
	<link rel="stylesheet" href="css/Reset.css" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body class="javascript" style="padding: 5px;">
	<div id="own">
		<div id="own-c">
			<h2 style="margin-bottom: 5px;">Word generator</h2>
			<h5 style="margin-bottom: 15px;">Для тех, кому впадлу придумывать названия.</h5>

			<div class="msg-box" data-type="rule" style="margin-bottom: 7.5px;">
				<h4>Внимание</h4>
				<p>Для работы необходим JavaScript.</p>
				<p>Для генерации используйие <b>консоль вашего браузера</b>.</p>
			</div>

			<h4 style="margin-bottom: 5px;">Генерация</h4>
			<p style="margin-bottom: 10px;">Для генерации 1-го случайного слова требуется
				вызвать метод: <code>RandomWord</code>
			</p>

			<table style="margin-bottom: 5px;">
				<thead>
					<tr>
						<th>№</th>
						<th>Имя параметра</th>
						<th>Тип</th>
						<th>Описание</th>
						<th>Значение по умолчанию</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td><code>maxLength</code></td>
						<td><code>number</code></td>
						<td>Максимальная длинна слова в сиимволахю</td>
						<td>НЕТ</td>
					</tr>
					<tr>
						<td>2</td>
						<td><code>maxOTR</code></td>
						<td><code>number</code></td>
						<td>Максимальная количество символов подря, которые могут име олин и тот же тип.</td>
						<td><code>1</code></td>
					</tr>
					<tr>
						<td>–</td>
						<td>Возращемое значение</td>
						<td><code>string</code></td>
						<td>Случайное слово.</td>
						<td>–</td>
					</tr>
				</tbody>
			</table>

			<p style="margin-bottom: 10px;">Для генерации нескольких случайных слов требуется
				вызвать метод: <code>randomWordTest</code>
			</p>

			<table style="margin-bottom: 5px;">
				<thead>
					<tr>
						<th>№</th>
						<th>Имя параметра</th>
						<th>Тип</th>
						<th>Описание</th>
						<th>Значение по умолчанию</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td><code>count</code></td>
						<td><code>number</code></td>
						<td>Количество слов для генерации</td>
						<td>НЕТ</td>
					</tr>
					<tr>
						<td>2</td>
						<td><code>maxLength</code></td>
						<td><code>number</code></td>
						<td>Максимальная длинна слова в сиимволахю</td>
						<td><code>8</code></td>
					</tr>
					<tr>
						<td>–</td>
						<td>Возращемое значение</td>
						<td><code>void</code></td>
						<td>–</td>
						<td>–</td>
					</tr>
				</tbody>
			</table>

			<h4 style="margin-bottom: 10px;">Результат</h4>
			<p style="margin-bottom: 10px;">Ниже представлен список сгенерированных слов.</p>
			<div class="msg-box" data-type="hint" style="margin-bottom: 7.5px;">
				<h4>Подсказка</h4>
				<p>Обновите страницу для обновления списка.</p>
			</div>
			<table style="margin-bottom: 10px;">
				<thead>
					<tr>
						<th>UUID</th>
						<th>Дата генрации</th>
						<th>Слово</th>
						<th>Сохранить</th>
					</tr>
				</thead>
				<tbody id="clist">
				</tbody>
			</table>

			<div class="msg-box" data-type="note" style="margin-bottom: 10px;">
				<h4>Примечание</h4>
				<p>Слова со включенной галочкой "<i>Сохранить</i>" остаются в ьаблице даже после обновления страницы и
					закрытия
					браузера.</p>
			</div>

			<h4 style="margin-bottom: 10px;">Быстрая генерация</h4>
			<div id="opts" style="width: 50%; margin-bottom: 10px;">
				<div class="lopt" style="margin-bottom: 7px;">
					<p>Количество слов:</p>
					<input type="number" name="wordsCount" id="i-wc" min="1" max="255" step="1" value="1" />
				</div>
				<div class="lopt">
					<p>Максимальная длинна слов:</p>
					<input type="number" name="wordsLength" id="i-wl" min="2" max="25" step="1" value="8" />
				</div>
			</div>
			<button id="i-b" style="font-size: 18px;">Сгенерировать</button>
		</div>
	</div>
</body>

<style>
	#own {
		width: 1000px;

		margin-left: auto;
		margin-right: auto;

		border: solid #5f5f5f33 5px;

		padding: 5px;

		min-height: calc(100% - 10px);
		max-height: calc(100% - 10px);

		overflow-y: scroll;
	}

	#own-c {
		margin-left: auto;
		margin-right: auto;

		overflow: auto;

		width: 800px;
	}

	#own::-webkit-scrollbar {
		width: 10px;
	}

	table th,
	table td {
		padding: 5px;
	}
</style>

<link rel="stylesheet" href="css/Web.Base.css" />
<link rel="stylesheet" href="css/Web.Form.css" />

<script src="scripts/Client.Data.js"></script>
<script src="scripts/Client.js"></script>